<template>
	<view class="" v-if="floatList && floatList.length">
		<view class="cu-modal" :class="{ show: showMask }" @tap="hideMask"></view>
		<!-- 悬浮按钮菜单 -->
		<view class="shopro-float-btn">
			<button class="wechat-btn u-reset-button" @tap="onBtnItem()">
<!--        <image class="wechat_img" :src="floatList.length == 1 ? floatList[0].btnimage : floatData.image" mode="widthFix"></image>-->
        <text>参团</text>
      </button>
			<view :class="showBtnList ? 'float--active' : 'float-list-box'">
				<view class="btn-img-box u-flex-col" @tap="onBtnItem(item)" v-for="item in floatList" :key="item.btnimage">
					<view class="btn-item u-flex-col u-row-center u-col-center">
						<image class="btn-img" :src="item.btnimage" mode="aspectFill"></image>
						<view class="btn-name">{{ item.name }}</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 弹窗 -->
		<view class="cu-modal" :class="{ show: showModal }">
      <view class="show_mask" @tap="showModal = false"></view>
			<view class="cu-dialog" style="">
        <u-icon name="close" color="#333" size="30" class="close-btn" @tap="showModal = false"></u-icon>
        <view class="cu-dialog-title">参与{{pinkInfoList.nickname}}的拼单</view>
        <view class="cu-dialog-sub-title">
<!--          仅剩<view class="name_num">{{name_num}}</view>个名额，-->
          <view class="times" v-if="pinkInfoList.times&&pinkInfoList.times>0">
            <u-count-down :show-days="false" :timestamp="pinkInfoList.times" separator-color="#000" bg-color="#fff" color="#000" @timeup="init"></u-count-down>后结束
          </view>
          <view class="times" v-else>
            拼团已结束
          </view>
      </view>
<!--				<view class="img-box">-->
<!--          <image class="modal-img" :src="item.images?item.images:'https://d-duomi.bigchun.com/images/huixiang1.png'" mode="aspectFit" @tap="saveImage(modalImg)" v-for="(item,index) in imglist" :key="index"></image>-->
<!--        </view>-->
        <view class="button_go" @tap="(pinkInfoList.times&&pinkInfoList.times>0)?gopingtuan():close_tan()">
          {{ pinkInfoList.times && pinkInfoList.times > 0 ? "参与拼团" : "我知道了~" }}</view>
			</view>
		</view>
	</view>
</template>

<script>
/**
 * 悬浮按钮，悬浮菜单。全局通用，数据为vuex初始化导入。
 * @property {Array} floatList - 悬浮按钮菜单数据列表
 */
import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
import Auth from '@/shopro/permission/index.js';
export default {
	components: {},
	data() {
		return {
      name:'焦胖子',//名称
      remainTime: '100',
      name_num:'1',
			showBtnList: false, //列表弹出
			modalImg: 'https://d-duomi.bigchun.com/images/huixiang1.png', //子项图片弹出
			showModal: false, //modal层
			showMask: false,
			platform: this.$platform.get(),
      floatList:[
          {name:'参团',btnimage:'https://d-duomi.bigchun.com/images/huixiang1.png'},
        {name:'参团',btnimage:'https://d-duomi.bigchun.com/images/huixiang1.png'},
        {name:'参团',btnimage:'https://d-duomi.bigchun.com/images/huixiang1.png'}
      ],
      imglist:[
        {images:'https://d-duomi.bigchun.com/images/huixiang1.png'},{images:''}
      ],
      pinkInfoList:{

      }
		};
	},
	props: {},
	computed: {
		...mapGetters(['floatData']),
		// 悬浮按钮数据列表
		// floatList() {
		// 	if (this.floatData) {
		// 		return this.floatData.list;
		// 	}
		// }
	},
	created() {
	  this.init()
  },
	methods: {
    init(){
      this.$https('vip.pinkInfo_go', {
        token:uni.getStorageSync("token"),
        id:uni.getStorageSync("vip_pink_id"),
      }).then(resPinkInfo => {
        if(resPinkInfo.code == '1'){
          this.pinkInfoList = resPinkInfo.data
        }
      })
    },
    gopingtuan(){
      this.showModal = false;
      uni.navigateTo({
        url: `pages/user/wallet/tgListContent?id=${this.pinkInfoList.vip_pink_id}&is_join=0&typeTitle=1`
      })
    },
    close_tan(){
      this.showModal = false
    },
		hideMask() {
			this.showBtnList = false;
			this.showMask = false;
		},
		// 点击悬浮按钮
		onBtn() {
			this.showMask = !this.showMask;
			// if (this.floatList.length == 1) {
			// 	this.modalImg = this.floatList[0].image;
			// 	this.floatList[0].style == 2 ? this.$Router.push(this.floatList[0].path) : (this.showModal = true);
			// 	this.showMask = false;
			// } else {
			// 	this.showBtnList = !this.showBtnList;
			// }
		},
		// 点击按钮菜单，如果悬浮按钮数据为一条，按钮图片为唯一菜单项图片和标题
		onBtnItem(item) {
			// if (item.style == 2) {
			// 	this.showMask = false;
			// 	this.showModal = false;
			// 	this.showBtnList = false;
			// 	this.$Router.push(item.path);
			// } else {
			// 	this.modalImg = item.image;
				this.showMask = false;
				this.showModal = true;
				this.showBtnList = false;
				// !item.image && console.log(`%cerr:弹窗图片未配置`, 'color:green;background:yellow');
			// }
		},

		// saveImageToPhotosAlbum(path) {
		// 	uni.saveImageToPhotosAlbum({
		// 		filePath: path,
		// 		success: res => {
		// 			this.showMask = false;
		// 			this.showModal = false;
		// 			this.$u.toast('保存成功');
		// 		},
		// 		fail: err => {
		// 			console.log(`图片保存失败:`, err);
		// 			this.$u.toast('保存失败');
		// 		}
		// 	});
		// },
		// 保存图片
		// async saveImage(path) {
		// 	let that = this;
		// 	if (['wxOfficialAccount', 'H5'].includes(this.platform)) {
		// 		this.$u.toast('长按图片保存');
		// 		return false;
		// 	}
		// 	let authState = await new Auth('writePhotosAlbum').check();
		// 	if (authState) {
		// 		// #ifdef MP ||APP-VUE
		// 		const res = await uni.downloadFile({
		// 			url: this.$tools.checkMPUrl(path)
		// 		});
		// 		res[1].statusCode === 200 && this.saveImageToPhotosAlbum(res[1].tempFilePath);
		// 		// #endif
		// 	}
		// }
	}
};
</script>

<style lang="scss">
.shopro-float-btn {
	position: fixed;
	bottom: calc(var(--window-bottom) + 100rpx);
	right: 30rpx;
	z-index: 9999;
	.float--active {
		position: absolute;
		bottom: 80rpx;
		right: 0;
		left: 0;
		margin: 0 auto;
		z-index: 10010;
		transform: scale(1);
		transition: all 0.2s linear;
	}
	.float-list-box {
		position: absolute;
		z-index: 10010;
		bottom: 0;
		right: 0;
		left: 0;
		margin: 0 auto;
		transform: scale(0);
		transform-origin: bottom;
		opacity: 0;
		transition: all 0.2s linear;
	}
	.btn-item {
		margin-bottom: 20rpx;
		.btn-img {
			width: 60rpx;
			height: 60rpx;
		}
		.btn-name {
			font-size: 20rpx;
			color: #fff;
			text-align: center;
			white-space: nowrap;
		}
	}
	.wechat-btn {
		box-shadow: 0px 0px 20px 4px rgba(199, 199, 199, 0.22);
		border-radius: 50%;
		width: 80rpx;
		height: 80rpx;
    background: #dd6161;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
		.wechat_img {
			width: 80rpx;
			height: 80rpx;
		}
	}
}
.img-box {
	position: relative;
	width: 610rpx;
  display: flex;
  justify-content: center;
	.modal-img {
    width:100rpx;
    height: 100rpx;
    margin-right: 30rpx;
		will-change: transform;

	}
}
.cu-modal{
  .show_mask{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
  .cu-dialog{
    position: relative;
    width: 610rpx;
    height: 320rpx;
    background: #fff;
    border-radius: 20rpx;
    overflow: initial!important;
    z-index: 200;
    .cu-dialog-title{
      font-size: 38rpx;
      padding: 40rpx 20rpx 20rpx;
    }
    .cu-dialog-sub-title{
      padding: 0 20rpx 30rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      .name_num{
        color: #dd6161;
      }
    }
    .close-btn{

      background: #cccccc;
      border-radius: 50%;
      position: absolute;
      top: -30rpx;
      right: -20rpx;
      width: 60rpx;
      height: 60rpx;
      display: flex!important;
      justify-content: center!important;
    }
    .button_go{
      width: 80%;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #dd6161;
      color: #fff;
      border-radius: 8rpx;
      padding: 22rpx;
      font-size: 32rpx;
      margin: 20rpx auto;
    }
  }
}
/deep/.active{
  background-color: transparent!important;
}
</style>
